<template>
	<view class="index">
		<!-- 学校申报 -->
		<view class="box pb50">
			<!-- 每个学校的盒子 -->
			<view
				class="mid borderbox auto mt20"
				v-for="(item, index) in dataList"
				:key="index"
				@click="handerStudy(item)"
			>
				<!-- 学校名称 -->
				<view class="mt30 ml30"><subtitle :title="item.school"></subtitle></view>
				<!-- 中间组件部分 -->
				<view @click.stop="handerStop">
					<!-- @getPercent="getPercent" -->
					<chares :data="item"></chares>
				</view>

				<!-- 中间的线 -->
				<view class="lines"></view>
				<!-- 下半区的盒子 -->
				<view class="dflex flexw borderbox mt40 jcsb pl30">
					<view v-for="(itm, index) in item.classes" :key="itm.cid" class="itm-box mt24 dflex alc">
						<view class="circle" :style="{ backgroundColor: itm.color }"></view>
						<view class="pl16 fs28 fw500 color dflex">
							<view>{{ itm.name }}</view>
							<view class="ml10">{{ itm.value + '张' }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 大盒子结束 -->
		</view>
	</view>
</template>

<script>
import chares from '../components/chares/chares.vue';
import subtitle from '@/components/subtitle/subtitle.vue';
import dataList from '@/pagesA/apply/apply.js';
export default {
	components: { chares, subtitle },
	data() {
		return {
			dataList: dataList.dataList
		};
	},
	methods: {
		handerStudy(item) {
			uni.setStorageSync('classes', item.classes);
			uni.navigateTo({
				url: `/pagesA/studydata/studydata?id=${item.id}&school=${item.school}`
			});
		}
	}
};
</script>
<style lang="scss">
page {
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
}
.box {
	padding-bottom: 20rpx;
}
.mid {
	width: 690rpx;
	height: 644rpx;
	background: #ffffff;
	box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(51, 51, 51, 0.25);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	overflow: hidden;
}
.mid:first-child {
	margin-top: 20rpx;
}
.bgitem {
	width: 64rpx;
	height: 32rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.left .text:nth-child(4) {
	margin-top: 36rpx;
	margin-bottom: 36rpx;
}
.left .text:nth-child(2n + 2) {
	margin-left: 20rpx;
}

.circle {
	width: 20rpx;
	height: 20rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.itm-box {
	width: 35%;
}
.lines {
	width: 690rpx;
	height: 2rpx;
	background-color: #eaeaea;
}
</style>
